<template>
	<view class="notice u-flex-between u-col-center">
		<view class="notice-left u-flex">
			<view class="notice-title">新闻简报</view>
			<swiper class="notice-swiper" circular autoplay :interval="2000" :duration="500" vertical circular>
				<swiper-item class="notice-swiper-item u-flex" v-for="(item,index) in list" :key="index"
					@click="$navigateTo(item.address)">
					<view class="notice-text">{{item.content}}</view>
				</swiper-item>
			</swiper>
		</view>
		<u-icon name="arrow-right" size="12" color="#FFFFFF"></u-icon>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			list: {
				type: Array,
				default: (() => {
					return [];
				})
			},
		},
		methods: {}
	}
</script>

<style lang="scss">
	.notice {
		width: 694rpx;
		padding: 12rpx 20rpx 12rpx 16rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		background-color: rgba(0, 0, 0, 0.3);

		.notice-left {
			flex: 1;

			.notice-title {
				line-height: 1;
				padding-right: 20rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				border-right: 2rpx solid #FFFFFF
			}

			.notice-swiper {
				height: 48rpx;
				flex: 1;

				.notice-swiper-item {

					.notice-text {
						line-height: 1;
						padding-left: 20rpx;
						font-size: 24rpx;
						color: #B9B8B8;
					}
				}
			}
		}
	}
</style>